<template>
  <div>
    <AreaTree v-model="list.filter.areaCode" :isAll="false" isDefault>
      <div slot="bottomBtn" class="flex">
        <AuthButton @click="addItem('batch')" type="primary" name="批量新增" />
        <AuthButton @click="openLayout()" type="primary" name="首页应用排版" />
      </div>
      <div class="app-container">
        <el-form
          ref="listFilterRef"
          :model="list.filter"
          inline
          class="list-filter"
        >
          <el-form-item prop="status">
            <Status v-model="list.filter.status" />
          </el-form-item>
          <el-form-item>
            <el-button @click="reset"> 重置 </el-button>
          </el-form-item>
        </el-form>

        <div class="table-operation">
          <AuthButton @click="addItem()" name="新增" />
          <el-pagination
            v-bind="elPaginationProps"
            :total="list.total"
            :currentPage.sync="list.filter.pageNo"
            :pageSize.sync="list.filter.pageSize"
          />
        </div>

        <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
          <el-table-column label="图标位置" prop="position" />
          <el-table-column label="名称" prop="name" />
          <el-table-column label="所属地区" prop="areaName" />
          <el-table-column label="图标">
            <template slot-scope="{ row }">
              <PicViewer tableCell :value="row.icon" />
            </template>
          </el-table-column>
          <el-table-column label="跳转类型" prop="type">
            <template slot-scope="{ row }">
              {{ row.type | $value2label(dict.link_type) }}
            </template>
          </el-table-column>
          <el-table-column label="跳转项名称" prop="sourceName" />
          <el-table-column label="启用状态" width="80" align="center">
            <template slot-scope="{ row: { id, status } }">
              <KiPopSwitch
                v-bind="popSwitchProps(status)"
                @change="
                  updateStatus({
                    id,
                    status: status ^ 1,
                  })
                "
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding">
            <template slot-scope="{ row }">
              <auth-button @click="r({ id: row.id })" name="查看" />
              <auth-button @click="u({ id: row.id })" name="编辑" />
              <auth-button @click="d({ id: row.id })" name="删除" />
            </template>
          </el-table-column>
        </el-table>

        <KiFormDialog
          :show.sync="form.show"
          :title="formTitle"
          v-model="form.data"
          :submit="submitForm"
          :readonly="form.status === 'r'"
          ref="formRef"
          :loading="form.loading"
        >
          <template #el-form>
            <el-form-item label="名称" prop="name" :verify="{ maxLength: 10 }">
              <el-input v-model="form.data.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="所属地区" prop="areaCode" verify>
              <RegionSelect
                v-model="form.data.areaCode"
                :props="{ multiple: true }"
                :disabled="form.status === 'u' || newType == 'single'"
              />
            </el-form-item>
            <el-form-item label="上传图标" prop="icon" verify>
              <Imgpond
                v-model="form.data.icon"
                value-type="string"
                :count="1"
                :editable="false"
                aspectRatio="1/1"
                :size="0.04"
              />
            </el-form-item>
            <el-form-item label="图标位置" prop="position" verify>
              <el-select
                v-model="form.data.position"
                placeholder="请选择图标位置"
              >
                <el-option
                  v-for="item in 10"
                  :label="item"
                  :value="item"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="跳转类型" prop="sourceId">
              <GlobalSearch
                v-if="form.show"
                v-model="form.data.sourceId"
                :type.sync="form.data.type"
                :sourceId.sync="form.data.sourceId"
                :sourceName.sync="form.data.sourceName"
              />
            </el-form-item>
          </template>
        </KiFormDialog>
      </div>
    </AreaTree>
    <applicationLayout ref="layout" />
  </div>
</template>

<script>
import pageMixin from "@/utils/pageMixin";
import useAdmateAdapter from "@/utils/useAdmateAdapter";
import applicationLayout from "./components/applicationLayout.vue";

export default {
  mixins: [pageMixin],
  components: { applicationLayout },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: "one-travel-api/home-shortcut",
    }, {
      getListInitially: false
    }),
  watch: {
    'list.filter.areaCode'(n, o) {
      if(n && !o) {
        this.queryList()
      }
    }
  },
  data() {
    return {
      newType: "",
    };
  },
  methods: {
    // single 新增单个 ，batch 批量
    addItem(type = "single") {
      this.newType = type;
      this.form.data.areaCode =
        type == "single" ? [this.list.filter.areaCode] : [];
      this.c();
    },
    openLayout() {
      this.$refs.layout.open();
    },
  },
};
</script>

<style lang="scss" scoped>
.table-operation-reset {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}
:deep(.area-tree-left) {
  width: 290px !important;
}
</style>
